

import * as THREE from 'three';
import { Slider } from "antd";
import IElement from 'components/Three/interface/IElement';
// import styles from './index.module.less';
import Controller from 'Controller'
import React from "react";

export default function BaseProperties() {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const selectedElementUuid = threeController.useMemo(s => s.selectedElementUuid, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const element: IElement<THREE.AmbientLight> | undefined = React.useMemo(() => selectedElementUuid ? elementMap.get(selectedElementUuid) : undefined, [elementMap, selectedElementUuid])

    const onChangeIntensityInput = React.useCallback((e) => {
        if (!element) return;

        threeController.pipeline(async s => {
            element.version++;
            element.object3D.intensity = e;
        })()
    }, [element, threeController])

    if (!element) return <></>;

    return (
        <Slider max={1} value={element.object3D.intensity} step={0.01} onChange={onChangeIntensityInput} />       
    )
}
